<template>
  <div>
    <view v-if="userInfo" class="header">
      <view class="header_left">
        <view class="headerPic"><image :src="userInfo.avatarUrl" class="icon_headerImg"></image></view>
      </view>
      <view class="header_right">
        <view class="top">{{userInfo.nickName}}</view>
        <view class="bottom">ID 123456</view>
      </view>
    </view>
    <view class="interval_view"></view>
    <!--出租闲暇时间  -->
    <view class="rent_time">
      <view class="comm_left">
        <image src="/static/images/Slice 2make money@2x.png" class="icon_makeMoney"></image>
      </view>
      <view class="center" @click="toMyRoom">
        <view class="make_money">出租闲暇时间，马上赚钱</view>
      </view>
      <view class="comm_right"><image src="/static/images/Slice 2 right@2x.png" class="icon_right"></image></view>
    </view>
    <!--结束  -->
    <view class="interval_view"></view>

    <view class="others">
      <!--钱包层  -->
      <view class="purse">
        <view class="comm_left">
          <image src="/static/images/Slice 2 wallte@2x.png" class="icon_purse"></image>
        </view>
        <view class="comm_center">
          钱包
        </view>
        <view class="comm_right"><image src="/static/images/Slice 2 right@2x.png" class="icon_right"></image></view>
      </view>
      <!--结束  -->
      <!--订单层  -->
      <view class="order">
        <view class="comm_left">
          <image src="/static/images/Slice 2 order 2@2x.png" class="icon_order"></image>
        </view>
        <view class="comm_center">
          订单
        </view>
        <view class="comm_right"><image src="/static/images/Slice 2 right@2x.png" class="icon_right"></image></view>
      </view>
      <!--结束  -->
      <!--喜欢  -->
      <view class="like">
        <view class="comm_left">
          <image src="/static/images/Slice 2 like 3@2x.png" class="icon_like"></image>
        </view>
        <view class="comm_center">
          喜欢
        </view>
        <view class="comm_right"><image src="/static/images/Slice 2 right@2x.png" class="icon_right"></image></view>
      </view>
      <!--结束  -->
      <!--申诉  -->
      <view class="help del_borderBottom">
        <view class="comm_left">
          <image src="/static/images/Slice 2 help 4@2x.png" class="icon_help"></image>
        </view>
        <view class="comm_center">
          申诉
        </view>
        <view class="comm_right"><image src="/static/images/Slice 2 right@2x.png" class="icon_right"></image></view>
      </view>
      <!--结束  -->
    </view>
    <view class="interval_view"></view>
  </div>
</template>

<script>
    import {info} from "../../utils/userinfo";
    import {router} from "../../utils/router";

    export default {
      data() {
        return {
          userInfo: null,
        }
      },
      created() {
      },
      onShow() {
        // this.show = false;
        this.userInfo = info.getUserInfo();
        // if(this.userInfo.tel) {
        //   router.toRegister();
        // } else {
        //   this.show = true;
        // }
      },
      methods:{
        toMyRoom: function () {
          if(!this.userInfo.tel) {
            router.toRegister();
          } else {
            router.toOpenMyRoom();
          }
        }
      }
    }
</script>

<style scoped>
  .interval_view {
    background: #eee;
    height: 40rpx;
    width: 100%;
  }
  /*头像 姓名区 */
  .header {
    width: 100%;
    height: 180rpx;
  }
  /*头像  */
  .header_left {
    width: 182rpx;
    height: 180rpx;
    float: left;
    padding: 34rpx 40rpx 34rpx 30rpx;
    box-sizing: border-box;
  }

  .headerPic {
    width: 112rpx;
    height: 112rpx;
    border-radius: 50%;
    border: 1rpx solid #eee;
  }

  .icon_headerImg {
    width: 112rpx;
    height: 112rpx;
    border-radius: 50%;
  }
  /*姓名  */
  .header_right {
    width: 568rpx;
    height: 180rpx;
    float: left;
  }
  .header_right .top {
    height: 100rpx;
    width: 100%;
    padding: 40rpx 0 10rpx 0;
    box-sizing: border-box;
    font-size: 36rpx;
    color: #000;
  }

  .header_right .bottom {
    height: 80rpx;
    width: 100%;
    font-size: 28rpx;
    color: #333;
    padding-bottom: 40rpx;
    box-sizing: border-box;
  }


  /*出租时间  */
  .rent_time {
    width: 100%;
    height: 88rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
  }

  .rent_time .center {
    width: 590rpx;
    height: 88rpx;
    padding: 16rpx 0 16rpx 0;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #ffa6a6;
    float: left;
  }

  .make_money {
    border-radius: 4px;
    width: 350rpx;
    height: 56rpx;
    border: 1rpx solid #ffa6a6;
    line-height: 56rpx;
    text-align: center;
  }

  .rent_time .right {
    width: 54rpx;
    height: 88rpx;
    float: left;
  }
  /*钱包，订单，喜欢，申诉 */
  .others {
    width: 100%;
    height: 358rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
  }

  .purse, .order, .like, .help {
    width: 100%;
    height: 88rpx;
    border-bottom: 1rpx solid #eee;
  }

  .del_borderBottom {
    border-bottom: none;
  }

  .comm_left {
    width: 80rpx;
    height: 88rpx;
    float: left;
  }

  .comm_center {
    width: 590rpx;
    height: 88rpx;
    padding: 24rpx 0 24rpx 0;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #333;
    float: left;
  }

  /*所有图标  */
  .icon_makeMoney, .icon_purse, .icon_order, .icon_like, .icon_help, .icon_right {
    width: 48rpx;
    height: 48rpx;
    margin-top: 20rpx;
  }
</style>
